<template>
	<view class="main">
		<view class="page-content2" v-if="isActiveIndex==0">
			<home></home>
		</view>
		<!-- <view class="page-content2" v-if="isActiveIndex==1">
			<workbench>
			</workbench>
		</view>
		<view class="page-content" v-if="isActiveIndex==2">
			<message></message>
		</view> -->
		<view class="page-content2" v-if="isActiveIndex==1">
			<mine></mine>
		</view>
		<view class="footer">
			<view :class="item.isActive?'footer-item-active footer-item':'footer-item'" v-for="(item,index) in footerList" :key="index"
			 @click="checkPage(item,index)">
				<image class="item-img" :src="item.isActive?item.activeImg:item.img" mode=""></image>
				<text class="item-name">{{item.name}}</text>
				<text v-if="item.messageCount" class="message-count">{{item.messageCount}}</text>
			</view>
		</view>

		<uni-popup ref="popup" type="center" :maskClick="false">
			<view class="authorize">

				<image class="auth-icon" src="../../static/image/authorize.png" mode=""></image>
				<text class="auth-title">授权申请</text>
				<view class="line">

				</view>
				<text class="auth-content">申请获取您的公开信息（昵称、头像）</text>

				<button class="auth-btn" open-type="getUserInfo" @getuserinfo="getuserinfo">授权</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// import workbench from './workbench.vue'
	import home from './home.vue';
	import mine from './mine.vue';
	// import message from './message.vue'
	import request from '@/static/js/request.js'
	import {
		login
	} from '@/static/js/auth.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	var self;
	export default {
		components: {
			home,
			mine,
			// message,
			// workbench,
			uniPopup
		},
		data() {
			return {
				isActiveIndex: 0,
				footerList: [{
						name: '首页',
						name_code: 'home',
						isActive: true,
						img: "../../static/image/main/home.png",
						activeImg: "../../static/image/main/home_active.png"
					},

					{
						name: '消息',
						name_code: 'message',
						isActive: false,
						img: "../../static/image/main/message.png",
						activeImg: "../../static/image/main/message_active.png",
						messageCount: 0
					},
					{
						name: '我的',
						name_code: 'mine',
						isActive: false,
						img: "../../static/image/main/mine.png",
						activeImg: "../../static/image/main/mine_active.png"
					}
				],
				userInfo: ''
			}
		},

		onLoad() {
			uni.setNavigationBarTitle({
				title: '首页'
			});
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));

		},
		
		mounted() {
			self = this;
			if (this.userInfo && this.userInfo.access_token) {

			} else {
				this.$refs.popup.open()
			}

		},

		methods: {
			getuserinfo(e) {
				if (e.detail.rawData) {
					uni.showLoading({
						title: '正在登录'
					})
					uni.login({
						success: function(loginRes) {


							var code = loginRes.code;
							uni.getUserInfo({
								success: (res) => {

									let data = {
										code,
										encryptedData: res.encryptedData,
										iv: res.iv,
										vmp: 'vmp'
									};
									request.post('/api/v1/signup/0', data).then(resp => {
										uni.setStorageSync('userInfo', JSON.stringify(resp.data))
										uni.hideLoading();
										self.$refs.popup.close();

									}).catch(e => {
										uni.showToast({
											icon: 'none',
											title: e.message
										})
									})
								},
								fail: () => {
									console.log("未授权");
								}
							})
						}
					});
				}

			},
			checkPage(item, index) {
				this.isActiveIndex = index;
				uni.setNavigationBarTitle({
					title: item.name
				});
				this.footerList.forEach((item2, index2) => {
					if (item.name == item2.name) {
						item2.isActive = true;

					} else {
						item2.isActive = false;
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	/* 	page {
		background: #F4F5F9;
	} */

	.main {
		/* #ifdef MP-WEIXIN */
		height: 100vh;
		/* #endif */

		/* #ifdef H5 */
		height: calc(100vh - 100rpx);
		/* #endif */
	}

	.page-content {
		/* position: absolute;
		bottom: 100rpx;
		top: 0;
		left: 0;
		right: 0; */
		/* height: calc(100% - 100rpx); */
		/* margin-bottom: 100rpx; */

	}

	.page-content2 {
		/* margin-bottom: 100rpx; */
	}

	.footer {
		position: fixed;
		// z-index: ;
		bottom: 0;
		left: 0;
		right: 0;
		background: #FFFFFF;
		box-shadow: 0 -1px 0 0 #EFEFEF;
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.footer-item {
		flex: 1;
		color: #666666;
		font-size: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.item-img {
		width: 44rpx;
		height: 44rpx;
		margin-bottom: 8rpx;
	}

	.item-name {
		height: 28rpx;
	}

	.message-count {
		color: #FFFFFF;
		font-size: 24rpx;
		background: #EB0824;
		height: 36rpx;
		/* width: 36rpx; */
		padding: 0 10rpx;
		border-radius: 18rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 80rpx;
		top: -10rpx;
	}

	.footer-item-active {
		color: #B8212B;
	}

	.authorize {

		background: #FFFFFF;
		border-radius: 8rpx;
		padding: 40rpx 26rpx 44rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.auth-icon {
			width: 66rpx;
			height: 76rpx;
			margin-bottom: 12rpx;
		}

		.auth-title {
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
		}

		.auth-content {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
		}

		.line {

			height: 2rpx;
			background: #EEEEEE;
			width: 100%;
			margin: 22rpx 0;
		}

		.auth-btn {
			margin-top: 38rpx;
			width: 300rpx;
			height: 68rpx;
			background: #B8212B;
			border-radius: 2rpx;
			border: 2rpx solid #B8212B;
			line-height: 68rpx;
			font-size: 28rpx;

			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>
